使用缓存图片

2023-08-27 18:35| 来源: 网络整理| 查看: 265

使用缓存图片 Contents

添加占位符

完整样例

在一些情况下，缓存从网络下载的图片用于离线显示是十分方便的，你需要引入 cached_network_image 这个 package 来实现这项功能。

info 提示:

了解更多，请参考下方「每周 Widget」的里关于 cached_network_image 的短视频：

除了缓存，cached_image_network 包也支持占位符和加载后的图片淡入。

CachedNetworkImage( imageUrl: 'https://picsum.photos/250?image=9', ); 添加占位符

cached_network_image 包允许任何 widget 充当占位符。在本例中，加载图片时会展示一个旋转加载的效果（spinner）作为占位符。

CachedNetworkImage( placeholder: (context, url) => const CircularProgressIndicator(), imageUrl: 'https://picsum.photos/250?image=9', ), 完整样例 import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'Cached Images'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: const Text(title), ), body: Center( child: CachedNetworkImage( placeholder: (context, url) => const CircularProgressIndicator(), imageUrl: 'https://picsum.photos/250?image=9', ), ), ), ); } }

【本文地址】

公司简介

联系我们